﻿@model SigMIS.ViewModel.Equipment.MapVMs.MapVM
@inject IStringLocalizer<Program> Localizer;

<div class="layui-row layui-col-space8" id="map-page">
    <div class="layui-col-md10">
        <div class="layui-row layui-col-space8">

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">地图<i class="layui-icon layui-icon-location" lay-offset="5" /></div>
                    <div class="layui-card-body">
                        <div id="map-view">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                线路 <i class="layui-icon layui-icon-tips" lay-tips="选择线路"></i>
            </div>
            <div class="layui-card-body layui-text">
                <wt:form vm="@Model">
                    <wt:combobox field="SelectedRoadLine" items="RoadLineItems" hide-label="true" empty-text="选择线路" change-func="LoadGpsData" />
                    <wt:row align="AlignEnum.Right">
                        <wt:LinkButton text="选择" url="/Equipment/Map/SelectRoadLine" post-current-form="true" size="ButtonSizeEnum.Small" />
                        <wt:LinkButton text="刷新" url="/Equipment/Map/RefreshRoadLines" post-current-form="true" size="ButtonSizeEnum.Small" theme="ButtonThemeEnum.Primary" />
                    </wt:row>
                </wt:form>


            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                备注 <i class="layui-icon layui-icon-tips" lay-tips="备注" lay-offset="5"></i>
            </div>
            <div class="layui-card-body layui-text layadmin-text">
                <p>
                    选定站点的说明信息
                </p>

            </div>
        </div>
    </div>
</div>

<script>
    //设置背景色
    $("#map-page").parent().css("background-color", "#eee");
</script>

@*--------------------------------------------------------------------------------------*@
<style type="text/css">
    #map-view {
        height: 660px;
    }
</style>
@*-----------------------------------------地图-----------------------------------------*@
<!-- 引入leafletapi -->
@*<link rel="stylesheet" href="/map/lib/leaflet.css" />
<script src="/map/lib/leaflet.js"></script>*@
<link rel="stylesheet" href="/map/leaflet/leaflet.css" />
<script src="/map/leaflet/leaflet.js"></script>

<!-- 引入互联网地图插件 -->
<script src="/map/lib/plugins/leaflet.ChineseTmsProviders.js"></script>

<!-- 互联网地图纠偏插件,需配合 leaflet.ChineseTmsProviders.js 插件使用,无需js代码，引用后自动纠偏,纠偏后的坐标为WGS84 -->
<script type="text/javascript" src='/map/lib/plugins/leaflet.mapCorrection.min.js'></script>

<script type="text/javascript">

    LoadGpsData();

    function LoadGpsData() {

        //获取GPS线路点
        var latlngs = [];
        @if (Model.RoadLinePoints != null)
        {
            for (int i = 0; i <Model.RoadLinePoints.Count; i++)
            {
                var item = Model.RoadLinePoints[i];

                <text>
        latlngs.push([@item.Latitude, @item.Longitude]);
                </text>
            }
        }

        //显示地图
        var map = L.map('map-view', {
            center: latlngs[0],
            zoom: 8
        });

        //添加底图
        L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);

        //设置参照物
        //L.marker([39.905530, 116.391305]).addTo(map).bindPopup('<p>坐标</p>').openPopup();


        //绘画线路
        L.polyline(latlngs, { color: 'blue', opacity: '0.6', weight: '8' }).addTo(map);

    }
</script>

@*<script>
        var mymap = L.map('map-view', { minZoom: 9, maxZoom: 12 }).setView([39.5, 116.5], 9);

        //添加底图(高德在线地图)
        L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(mymap);

        ////添加高德离线地图（离线地图Tile文件下载在/map/map_gaode/目录下
        //L.TileLayer.Custom = L.TileLayer.extend({
        //    getTileUrl: function (coords) {
        //        url = '/map/map_gaode/' + coords.z + '/' + coords.x + '/' + coords.y + '.png';
        //        return url;
        //    }
        //});

        //L.tileLayer.Custom = function () { return new L.TileLayer.Custom(); }
        //L.tileLayer.Custom().addTo(mymap);

        //设置参照物
        L.marker([39.905530, 116.391305]).addTo(mymap).bindPopup('<p>坐标</p>').openPopup();

    </script>*@

@*--------------------------------------------------------------------------------------*@
